<template>
  <!-- 老虎机-Slots详情 -->
  <el-dialog v-if="props.show" :modelValue="props.show" custom-class="detailData" :title=" selectToLabel(indexStore.gameArray, props.checkedItem.game_id)" 
    width="60%" :close-on-click-modal="false" :close-on-press-escape="false" @close="onHideDetails">
    <div class="border-box">
      <template v-for="(item, index) in data.filArr" :key="index">
        <div class="flex list">
          <div class="width20">{{ item.label }}</div>
          <div>
            <span v-if="item.key=='win_lose'||item.key=='bet'||item.key == 'win'||item.key=='enter_money'||item.key == 'after_settlement_money' " 
            :class="colorClass(item.value)">{{ BigWan(item.value) }}</span>
            <span v-else>{{ item.value }}</span>
          </div>
        </div>
      </template>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { setTimestampTime } from '@/utils/time'
import { BigWan, BigMinus } from '@/utils/math'
import { selectToLabel, colorClass, arrayGroup } from '@/utils/index'
import { 
WHETHERNOT,
LuckyMouse,
LuckyNiu,
LuckyTiger,
LuckyRabbit,
FortuneNiuniu,
Piggy,
DoubleHappiness,
BountyQueen,
YellowGold,
CaptainBounty,
DuelWilderness,
JungleBash,
Gangsters,
DeadBandit,
MahjongWay,
CashManias,
LuckyCat,
MahjongWays,
Crazy777s,
ChargeBuffalos,
SuperAces,
FortuneGem,
FortuneGem2,
BoxingKings,
FaFaFas
} from '@/config/eunm'

import { TigerSurface } from './tigerSurface'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  filArr: [] as any[],
  // LuckyMouse【126】幸运鼠 ~ LuckyNiu【98】幸运牛 ~ LuckyTiger【126】幸运虎 ~ LuckyRabbit【1543462】幸运兔
  // FortuneNiuniu【1695365】幸运龙 ~ Piggy【39】小金猪 ~ DoubleHappiness【48】双喜 ~ BountyQueen【84】赏金女王
  // YellowGold【42】黄金价内什 ~ CaptainBounty【54】船长的赏金 ~ DuelWilderness【135】荒野决斗 ~ JungleBash【40】丛林狂欢
  // Gangsters【1580541】黑帮风云 ~ DeadBandit【104】亡灵大盗 ~ MahjongWay【74】麻将 ~ CashManias【1682240】快钱来了 
  // LuckyCat【89】幸运猫 ~ MahjongWays【65】麻将1 ~  Crazy777s【10035】疯狂777 ~  ChargeBuffalos【10047】冲锋野牛
  // SuperAces【10049】超级王牌 ~ FortuneGem【10109】伽罗宝石 ~  FortuneGem2【10223】伽罗宝石2 ~  BoxingKings【10077】拳王
  // FaFaFas【 10021 】发发发
  nameList:[
    {label: Piggy, value:39},
    {label: JungleBash, value:40},
    {label: YellowGold, value:42},
    {label: DoubleHappiness, value:48},
    {label: CaptainBounty, value:54},
    {label: LuckyMouse, value:68},
    {label: MahjongWays, value:65},
    {label: MahjongWay, value:74},
    {label: BountyQueen, value:84},
    {label: LuckyCat, value:89},
    {label: LuckyNiu, value:98},
    {label: DeadBandit, value:104},
    {label: LuckyTiger, value:126},
    {label: DuelWilderness, value:135},
    {label: FaFaFas, value:10021},
    {label: Crazy777s, value:10035},
    {label: ChargeBuffalos, value:10047},
    {label: SuperAces, value:10049},
    {label: FortuneGem, value:10109},
    {label: BoxingKings, value:10077},
    {label: FortuneGem2, value:10223},
    {label: LuckyRabbit, value:1543462},
    {label: Gangsters, value:1580541},
    {label: CashManias, value:1682240},
    {label: FortuneNiuniu, value:1695365},
  ],
})

watch(
  () => [props.checkedItem,props.show],
  async (value) => {
    if (value[0] && value[1]) {
      gameDetails()
    }
  },
)

// 详情
const gameDetails = () => {
  let res = JSON.parse(props.checkedItem.log_json)
  console.log('老虎机详情',res);
  data.filArr = [
    { label: '游戏', value: selectToLabel(indexStore.gameArray, props.checkedItem.game_id), key: 'game_id' },
    { label: '牌局编号', value: props.checkedItem.round_id_str, key: 'round_id_str' },
    { label: '时间', value: setTimestampTime(props.checkedItem.save_time_stamp), key: 'created_time_stamp' },
    { label: '当前盘面', value: surFace(res.rl), key: 'rl' },
    { label: '下注前', value: props.checkedItem.enter_money, key: 'enter_money' },
    { label: '结算后', value: props.checkedItem.after_settlement_money, key: 'after_settlement_money' },
    { label: '下注金额', value: props.checkedItem.bet, key: 'bet' },
    { label: '玩家输赢', value: BigMinus(props.checkedItem.win,props.checkedItem.bet), key: 'win_lose' },
    { label: '玩家总赢', value: props.checkedItem.win, key: 'win' },
    { label: 'icon上每条线赢取的金额', value: res.lw, key: 'lw' },
  ]
}

// 盘面
const surFace = (arr:any) => {
  let name = [] as string[];
  // 赏金女王数据4个一组 每一组第一个不展示
  if(props.checkedItem.game_id == 84){
    if(arr){
      let newArr = arrayGroup(arr,4)
      newArr.forEach((item:any)=>{
        item.splice(0,1)
        item.forEach((second:any)=>{
          name.push(selectToLabel(selectToLabel(data.nameList, props.checkedItem.game_id), Number(second)))
        })
      })
    }
  }else{
    if(arr){
      arr.forEach((item:string)=>{
        name.push(selectToLabel(selectToLabel(data.nameList, props.checkedItem.game_id), Number(item)))
      })
    }
  }
  // let name = '';
  // name = new TigerSurface().localApi(props.checkedItem,arr,selectToLabel(data.nameList, props.checkedItem.game_id))
  return name.toString()
}

// icon线 赢取的金额
const iconLine = (row:any) => {
  let name = [] as any[],key= [] as string[],str='';
  if(row){
    key = Object.keys(row)
    key.forEach((item:string)=>{
      name.push({label:selectToLabel(selectToLabel(data.nameList,props.checkedItem.game_id), item),value:row[item]})
    })
    name.forEach((item:any)=>{
      str += item.label+':'+item.value+';'
    })
  }
  return str
}

// 倍数
const multiple = (row:any) => {
  let name = [];
  if(row){
    
  }
  return ''
}

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.border-box {
  padding-bottom: 40px;
  font-size: 14px;
  color: var(--text);
}

.fily {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .fily-list {
    width: 50%;
  }
}

.flight {
  width: 100%;
}

.list {
  font-weight: bold;
  height: 36px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>